<template>
  <!-- 整个导航的最外层盒子 -->
  <div class="navigation_title">
    <!-- 上半部分标题栏 -->
    <div class="title_bar">
      <div class="title_left">
        <div class="left_svdr">
          <p class="left_svg button_time">
            <svg
              t="1665304232498"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6914"
              width="20"
              height="20"
            >
              <path
                d="M961.221347 187.419602v-17.59564c0-29.610647-24.004727-53.616578-53.615073-53.616578H291.407274c-29.609443 0-53.615976 24.005028-53.615976 53.615976v17.596242c0 29.611851 24.004727 53.615073 53.615976 53.615073h616.199c29.610346-0.000602 53.615073-24.003222 53.615073-53.615073zM965.003581 517.952715v-17.596844c0-29.611249-24.004426-53.616277-53.615073-53.616277H295.190713c-29.610045 0-53.61718 24.002921-53.617181 53.616277v17.596844c0 29.609744 24.005028 53.615374 53.617181 53.615374h616.198096c29.610346-0.002709 53.614772-24.00563 53.614772-53.615374zM965.003581 844.431756v-17.598048c0-29.610346-24.004426-53.616277-53.615073-53.616277H295.190713c-29.610045 0-53.61718 24.004727-53.617181 53.616277v17.598048c0 29.610045 24.005028 53.614772 53.617181 53.614772h616.198096c29.610346-0.003612 53.614772-24.004426 53.614772-53.614772z"
                fill="#0a82b4"
                p-id="6915"
              ></path>
              <path
                d="M121.431287 179.551988m-62.435169 0a62.43517 62.43517 0 1 0 124.870339 0 62.43517 62.43517 0 1 0-124.870339 0Z"
                fill="#0a82b4"
                p-id="6916"
              ></path>
              <path
                d="M121.431287 509.153089m-62.435169 0a62.43517 62.43517 0 1 0 124.870339 0 62.43517 62.43517 0 1 0-124.870339 0Z"
                fill="#0a82b4"
                p-id="6917"
              ></path>
              <path
                d="M121.431287 835.631227m-62.435169 0a62.43517 62.43517 0 1 0 124.870339 0 62.43517 62.43517 0 1 0-124.870339 0Z"
                fill="#0a82b4"
                p-id="6918"
              ></path>
            </svg>
          </p>
          <div class="left_dropdown">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link button_time">
                <i class="el-icon-s-data"></i>
                {{ pull_down }}&nbsp;<i :class="icon"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-tree
                  :data="data"
                  :props="defaultProps"
                  accordion
                  @node-click="dropdown_switch"
                ></el-tree>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div class="left_time">
          <div class="time_area">
            <div class="time_area_top">北京时间</div>
            <div class="time_area_bottom">{{ yms }}</div>
          </div>
          <div class="time_hone">{{ mhs }}</div>
        </div>
      </div>
      <!-- 梯形 -->
      <div class="tixing">
        <div class="zuo bian"></div>
        <div class="title_bt">
          <div class="tit_img">
            <img src="../assets/yuanshuju/logo.jpg" alt="" />
          </div>
          <p>空间环境大数据</p>
        </div>
        <div class="you bian"></div>
      </div>

      <!-- 右侧高为40px的div -->
      <div class="title_right">
        <div class="right_time">
          <div class="time_area">
            <div class="time_area_top">世界时间</div>
            <div class="time_area_bottom">{{ yms_utc }}</div>
          </div>
          <div class="time_hone">{{ mhs_utc }}</div>
        </div>
        <!-- 右侧中间的功能 -->
        <!-- <div class="right_kjgn">
          <div>XX功能1</div>
          <div>XX功能2</div>
        </div> -->
        <!--最右侧的功能键 -->
        <div class="right_button">
          <div class="button_time" @click="router_login">
            <svg
              t="1665368501972"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="10265"
              width="16"
              height="16"
            >
              <path
                d="M501.041414 62.931285c125.654838 0 227.51269 100.19498 227.51269 223.775576 0 123.605156-101.856829 223.805252-227.51269 223.805252-125.650745 0-227.506551-100.199073-227.506551-223.805252C273.53384 163.097612 375.424438 62.931285 501.041414 62.931285L501.041414 62.931285 501.041414 62.931285zM501.041414 62.931285c125.654838 0 227.51269 100.19498 227.51269 223.775576 0 123.605156-101.856829 223.805252-227.51269 223.805252-125.650745 0-227.506551-100.199073-227.506551-223.805252C273.53384 163.097612 375.424438 62.931285 501.041414 62.931285L501.041414 62.931285 501.041414 62.931285zM415.730423 585.125461l189.629895 0c162.314783 0 293.880237 129.387859 293.880237 289.057395l0 18.622126c0 62.922075-131.593084 65.313541-293.880237 65.313541L415.730423 958.118524c-162.319899 0-293.880237-0.092098-293.880237-65.313541l0-18.622126C121.852232 714.51332 253.411547 585.125461 415.730423 585.125461L415.730423 585.125461 415.730423 585.125461z"
                p-id="10266"
                fill="#0e7aa1"
              ></path>
            </svg>
          </div>
          <div class="button_time">
            <svg
              t="1665368446842"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="8436"
              width="16"
              height="16"
            >
              <path
                d="M801 179H552c-19.9 0-36 16.1-36 36s16.1 36 36 36h171.3L537.8 436.4c-14.1 14.1-14.1 36.8 0 50.9 7 7 16.2 10.6 25.5 10.6 9.2 0 18.4-3.5 25.4-10.5L765 311.1V480c0 19.9 16.1 36 36 36s36-16.1 36-36V215c0-19.9-16.1-36-36-36zM464 785H292.7l185.5-185.4c14.1-14.1 14.1-36.8 0-50.9-14.1-14.1-36.8-14.1-50.9 0L251 724.9V556c0-19.9-16.1-36-36-36s-36 16.1-36 36v265c0 19.9 16.1 36 36 36h249c19.9 0 36-16.1 36-36s-16.1-36-36-36z"
                p-id="8437"
                fill="#0e7aa1"
              ></path>
            </svg>
          </div>
          <div class="button_time">
            <svg
              t="1665368397633"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7413"
              width="16"
              height="16"
            >
              <path
                d="M512 1024c-278.123457 0-505.679012-227.555556-505.679012-505.679012 0-120.098765 44.246914-240.197531 126.419753-335.012346 25.283951-25.283951 63.209877-31.604938 88.493827-6.320988 25.283951 25.283951 31.604938 63.209877 6.320988 88.493827C164.345679 335.012346 132.740741 423.506173 132.740741 518.320988c0 208.592593 170.666667 379.259259 379.259259 379.259259s379.259259-170.666667 379.259259-379.259259c0-94.814815-31.604938-183.308642-94.814815-252.839506-25.283951-25.283951-18.962963-63.209877 6.320988-88.493827 25.283951-25.283951 63.209877-18.962963 88.493827 6.320988 82.17284 94.814815 126.419753 208.592593 126.419753 335.012346C1017.679012 796.444444 790.123457 1024 512 1024z"
                p-id="7414"
                fill="#0e7aa1"
              ></path>
              <path
                d="M575.209877 379.259259c0 31.604938-25.283951 63.209877-63.209877 63.209877L512 442.469136C474.074074 442.469136 448.790123 417.185185 448.790123 379.259259L448.790123 63.209877c0-31.604938 25.283951-63.209877 63.209877-63.209877L512 0c31.604938 0 63.209877 25.283951 63.209877 63.209877L575.209877 379.259259z"
                p-id="7415"
                fill="#0e7aa1"
              ></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <!-- 下半部分导航栏 -->
    <div class="navigation_bar">
      <div class="navigation_left">
        <div
          :class="qclickh == '1' ? 'navigation_check' : ''"
          @click="router_link2(1)"
        >
          数据接引
        </div>
        <div
          :class="qclickh == '2' ? 'navigation_check' : ''"
          @click="router_link2(2)"
        >
          数据治理
        </div>
        <div
          :class="qclickh == '3' ? 'navigation_check' : ''"
          @click="router_link2(3)"
        >
          数据管理
        </div>
        <div
          :class="qclickh == '4' ? 'navigation_check' : ''"
          @click="router_link2(4)"
        >
          数据服务
        </div>
        <div
          :class="qclickh == '5' ? 'navigation_check' : ''"
          @click="router_link2(5)"
        >
          数据应用
        </div>
      </div>
      <div class="navigation_right">
        <div class="right_input">
          <input type="text" id="test" placeholder="搜索" />
          <button class="button_time">
            <svg
              t="1665383768666"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="11664"
              width="16"
              height="16"
            >
              <path
                d="M756.565333 697.258667c2.133333 1.493333 4.224 3.157333 6.101334 5.12l241.664 241.621333c16.256 16.256 16.512 43.52-0.128 60.16a42.453333 42.453333 0 0 1-60.202667 0.170667l-241.664-241.664a41.429333 41.429333 0 0 1-5.034667-6.101334A424.917333 424.917333 0 0 1 426.666667 853.333333C191.018667 853.333333 0 662.314667 0 426.666667S191.018667 0 426.666667 0s426.666667 191.018667 426.666666 426.666667c0 102.698667-36.266667 196.949333-96.768 270.592zM426.666667 768a341.333333 341.333333 0 1 0 0-682.666667 341.333333 341.333333 0 0 0 0 682.666667z"
                fill="#c4d1dd"
                p-id="11665"
              ></path>
            </svg>
          </button>
        </div>
        <div class="right_button">
          <!-- <div
            :class="qclickh == '6' ? 'navigation_check' : ''"
            @click="router_link1(6)"
          >
            处理1
          </div>
          <div
            :class="qclickh=='7'? 'navigation_check':''"
            @click="router_link1(7)"
          >
            处理2
          </div>
          <div
            :class="qclickh=='8'? 'navigation_check':''"
            @click="router_link1(8)"
          >
            处理3
          </div>
          <div
            :class="qclickh=='9'? 'navigation_check':''"
            @click="router_link1(9)"
          >
            显示
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pull_down: "数据接引",
      dropdown: ["数据接引", "数据治理", "数据管理", "数据服务", "数据应用"],
      right_xz: "0",
      data: [
        {
          // 采集汇报
          label: "数据接引",
          children: [
            {
              label: "数据源配置",
              routers: "/collectionreport/connection",
            },
            {
              label: "接引配置",
              routers: "/collectionreport/dataccess",
            },
            {
              label: "接引状态管理",
              routers: "/collectionreport/status",
              children: [
                {
                  label: "太阳监测数据",
                  type: "TKHJSUN",
                  sort: "1",
                },
                {
                  label: "行星际空间监测数据",
                  type: "TKHJINTE",
                  sort: "2",
                },
                {
                  label: "地球磁层监测数据",
                  type: "TKHJMAG",
                  sort: "3",
                },
                {
                  label: "中高层大气监测数据",
                  type: "TKHJATMO",
                  sort: "4",
                },
                {
                  label: "电离层监测数据",
                  type: "TKHJIONO",
                  sort: "5",
                },
                {
                  label: "地磁监测数据",
                  type: "TKHJGEOMAG",
                  sort: "6",
                },
                {
                  label: "宇宙线监测数据",
                  type: "TKHJCOSMIC",
                  sort: "7",
                },
                {
                  label: "效应数据",
                  type: "TKHJEFFECT",
                  sort: "8",
                },
                {
                  label: "产品类数据",
                  type: "TKHJPROD",
                  sort: "9",
                },
              ],
            },
          ],
        },
        {
          // 整合治理
          label: "数据治理",
          children: [
            {
              label: "治理方案配置",
              routers: "/about/cleaningdetection",
            },
            {
              label: "特征提取监管",
              routers: "/about/cleaningproblems",
            },
            {
              label: "数据关联配置",
              routers: "/about/convergenceassociation",
              children: [
                {
                  label: "X射线耀斑",
                  // usname: "inFormation",
                  conver: "1",
                },
                {
                  label: "质子事件",
                  // usname: "inFormation",
                  conver: "2",
                },
                {
                  label: "地磁暴",
                  // usname: "inFormation",
                  conver: "3",
                },
                {
                  label: "高能电子暴",
                  // usname: "inFormation",
                  conver: "4",
                },
                {
                  label: "电离层暴",
                  // usname: "inFormation",
                  conver: "5",
                },
              ],
            },
            {
              label: "治理状态监管",
              routers: "/about/governanceStatus",
            },
            {
              label: "治理问题清单",
              routers: "/about/governanceIssues",
            },
          ],
        },
        {
          // 数据管理
          label: "数据管理",
          routers: "/datamanag",
          children: [
            {
              label: "数据维护",
              routers: "/datamanag/datasafeguard",
              children: [
                {
                  label: "天基载荷高能电子和质子积分通量",
                  safeguard: "1",
                  routers: "/datamanag/datasafeguard/KjzElectronProtonFlux",
                },
              ],
            },
            {
              label: "统计报表",
              routers: "/datamanag/statisticalreport",
            },
            {
              label: "数据状态",
              routers: "/datamanag/datastatus",
            },
            {
              label: "维护日志",
              routers: "/datamanag/dailyrecord",
            },
          ],
        },
        {
          //数据服务
          label: "数据服务",
          children: [
            {
              label: "太阳监测数据",
              children: [
                {
                  label: "太阳日冕层SDO AIA 131观测",
                  routers: "/dataservices/ImagePlayer",
                  key: "SDO_131",
                },
                {
                  label: "太阳日冕层SDO AIA 171观测",
                  routers: "/dataservices/ImagePlayer",
                  key: "SDO_171",
                },
                {
                  label: "太阳日冕层SDO AIA 193观测",
                  routers: "/dataservices/ImagePlayer",
                  key: "SDO_193",
                },
                {
                  label: "太阳磁场SDO HMI观测",
                  routers: "/dataservices/ImagePlayer",
                  key: "SDO_HMI",
                },
                {
                  label: "太阳X射线",
                  key: "SDO_XSHEXIAN",
                },
              ],
            },
            {
              label: "行星际空间监测数据",
              children: [
                {
                  label: "太阳风参数",
                  solarWind: "1",
                  routers: "/dataservices/SolarWind",
                },
              ],
            },
            {
              label: "辐射环境监测数据",
              children: [
                {
                  label: "高能电子通量",
                  radiation: "1",
                },
                {
                  label: "高能质子积分通量",
                  radiation: "2",
                },
                {
                  label: "高能质子微分通量",
                  radiation: "3",
                },
              ],
            },
            {
              label: "电离层监测数据",
              children: [
                {
                  label: "电离层闪烁S4观测数据",
                  ionizedLayer: "1",
                },
                {
                  label: "电离层短波通信频率产品",
                  ionizedLayer: "2",
                },
              ],
            },
            {
              label: "地磁环境监测数据",
              children: [
                {
                  label: "地磁Kp指数",
                  GeomagneticRing: "1",
                },
                {
                  label: "地磁Ap指数",
                  GeomagneticRing: "2",
                },
                {
                  label: "地磁Dst指数",
                  GeomagneticRing: "3",
                },
              ],
            },
            {
              label: "天基载荷数据数据",
              children: [
                {
                  label: "天基载荷数据",
                  SpaceBased: "1",
                },
              ],
            },
            {
              label: "产品类数据",
              children: [
                {
                  label: "F10.7预报",
                  product: "1",
                },
                {
                  label: "Ap预报",
                  product: "2",
                },
                {
                  label: "Fof2预报",
                  product: "3",
                },
                {
                  label: "太空环境警报",
                  product: "4",
                },
                {
                  label: "太空环境日报",
                  product: "5",
                },
                {
                  label: "太空环境周报",
                  product: "6",
                },
                {
                  label: "太空环境通报",
                  product: "7",
                },
                {
                  label: "电离层参数现报",
                  product: "8",
                },
                {
                  label: "CME事件特征参数数据",
                  product: "9",
                },
              ],
            },
          ],
        },
        {
          // 智能应用
          label: "智能应用",
          children: [
            {
              label: "事件复盘",
              routers: "/eventReview",
              children: [
                {
                  label: "穿越南大西洋异常区",
                  routers: "/eventReview/thirdScene",
                  event: "SAA",
                },
                {
                  label: "磁层顶穿越",
                  routers: "/eventReview/thirdScene",
                  event: "Mag",
                },
              ],
            },
            {
              label: "故障异常诊断",
              routers: "/eventReview/thirdScene",
              // key: "FaultDiagnosis",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children", //children 是什么数据的节点就用什么渲染
        label: "label",
      },
      qclickh: "1", // 控制导航切换改变样式
      icon: "el-icon-caret-bottom",
      yms: "", // 年月日
      mhs: "", // 时分秒
      yms_utc: "", // 年月日
      mhs_utc: "", // 时分秒
    };
  },
  props: {
    letter: String,
  },
  methods: {
    dropdown_switch(item) {
      // console.log("测试", item);
      if (item.sort) {
        // console.log("你好", item);
        this.$router.push({
          path: "/collectionreport/status",
          query: { item: item.sort },
        });
        this.pull_down = "接引状态管理";
      } else if (item.conver) {
        // console.log("去数据关联配置", item.conver);
        this.$router.push({
          path: "/about/convergenceassociation",
          query: { item: item.conver, data: item.label },
        });
        this.pull_down = "数据关联配置";
      } else if (item.key) {
        // console.log(item);
        this.$router.push({ path: item.routers, query: { key: item.key } });
      } else if (item.safeguard) {
        this.$router.push({ path: item.routers });
        this.pull_down = "数据维护";
      } else if (item.solarWind) {
        this.$router.push({ path: item.routers });
        this.pull_down = "行星际空间监测数据";
      } else if (item.radiation) {
        this.$router.push({ path: item.routers });
        this.pull_down = "辐射环境监测数据";
      } else if (item.ionizedLayer) {
        this.$router.push({ path: item.routers });
        this.pull_down = "电离层监测数据";
      } else if (item.GeomagneticRing) {
        this.$router.push({ path: item.routers });
        this.pull_down = "地磁环境监测数据";
      } else if (item.SpaceBased) {
        this.$router.push({ path: item.routers });
        this.pull_down = "天基载荷数据数据";
      } else if (item.product) {
        this.$router.push({ path: item.routers });
        this.pull_down = "产品类数据";
      } else if (item.event) {
        this.$router.push({ path: item.routers });
        this.pull_down = "事件复盘";
      } else if (item.routers) {
        // console.log("我走的是routers");
        this.$router.push({ path: item.routers });
        this.pull_down = item.label;
      } else {
        console.log(item, "当前点击的");
        this.pull_down = item.label;
      }
      console.log(this.pull_down);
    },
    // 获取时间
    getTime() {
      setInterval(() => {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        //以下代码依次是获取当前时间的年月日时分秒
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        var minute = date.getMinutes();
        var hour = date.getHours();
        var second = date.getSeconds();
        //固定时间格式
        if (month >= 0 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        if (minute >= 0 && minute <= 9) {
          minute = "0" + minute;
        }
        if (hour >= 0 && hour <= 9) {
          hour = "0" + hour;
        }
        if (second >= 0 && second <= 9) {
          second = "0" + second;
        }
        this.yms = year + seperator1 + month + seperator1 + strDate;
        this.mhs = hour + seperator2 + minute + seperator2 + second;

        year = date.getUTCFullYear();
        month = date.getUTCMonth() + 1;
        strDate = date.getUTCDate();
        minute = date.getUTCMinutes();
        hour = date.getUTCHours();
        second = date.getUTCSeconds();
        if (month >= 0 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        if (minute >= 0 && minute <= 9) {
          minute = "0" + minute;
        }
        if (hour >= 0 && hour <= 9) {
          hour = "0" + hour;
        }
        if (second >= 0 && second <= 9) {
          second = "0" + second;
        }
        this.yms_utc = year + seperator1 + month + seperator1 + strDate;
        this.mhs_utc = hour + seperator2 + minute + seperator2 + second;
      }, 1000);
    },
    router_link1(id) {
      if (id == "1") {
        this.qclickh = "1";
        // this.$router.push("/");
      } else if (id == "2") {
        this.qclickh = "2";
        // this.$router.push("/about");
      } else if (id == "3") {
        this.qclickh = "3";
        // this.$router.push("/datamanag");
      } else if (id == "4") {
        this.qclickh = "4";
        console.log(this.qclickh);
        // this.$router.push("/dataservices");
      } else if (id == "5") {
        this.qclickh = "5";
        console.log(this.qclickh);
        // this.$router.push("/intelligent");
      } else if (id == "6") {
        this.qclickh = "6";
        console.log(this.qclickh);
        // this.$router.push("/documentation");
      } else if (id == "7") {
        this.qclickh = "7";
        console.log(this.qclickh);
        // this.$router.push("/documentation");
      } else if (id == "8") {
        this.qclickh = "8";
        console.log(this.qclickh);
        // this.$router.push("/documentation");
      } else if (id == "9") {
        this.qclickh = "9";
        console.log(this.qclickh);
        // this.$router.push("/documentation");
      }
    },
    router_link2(id) {
      if (id == "1") {
        this.qclickh = "1";
        this.$router.push("/");
        this.pull_down = "数据接引";
      } else if (id == "2") {
        this.qclickh = "2";
        this.$router.push("/about");
        this.pull_down = "数据治理";
      } else if (id == "3") {
        this.qclickh = "3";
        this.$router.push("/datamanag");
        this.pull_down = "数据管理";
      } else if (id == "4") {
        this.qclickh = "4";
        this.$router.push("/dataservices");
        this.pull_down = "数据服务";
      } else if (id == "5") {
        this.qclickh = "5";
        this.$router.push("/eventReview");
        this.pull_down = "数据应用";
      }
      this.$emit("expanded", [this.qclickh]);
    },
    hanshu(newValue) {
      if (
        newValue == "数据源配置" ||
        newValue == "接引配置" ||
        newValue == "接引状态管理"
      ) {
        this.router_link1(1);
      } else if (
        newValue == "治理方案配置" ||
        newValue == "特征提取监管" ||
        newValue == "数据关联配置" ||
        newValue == "治理状态监管" ||
        newValue == "治理问题清单"
      ) {
        this.router_link1(2);
      } else if (
        newValue == "数据维护" ||
        newValue == "统计报表" ||
        newValue == "数据状态" ||
        newValue == "维护日志"
      ) {
        this.router_link1(3);
      } else if (
        newValue == "太阳监测数据" ||
        newValue == "行星际空间监测数据" ||
        newValue == "辐射环境监测数据" ||
        newValue == "电离层监测数据" ||
        newValue == "地磁环境监测数据" ||
        newValue == "天基载荷数据数据" ||
        newValue == "产品类数据"
      ) {
        this.router_link1(4);
      } else if (newValue == "事件复盘" || newValue == "故障异常诊断") {
        this.router_link1(5);
      }
    },
    router_login() {
      // this.$router.push("/loginpage");
      console.log("你好啊");
    },
  },
  mounted() {
    this.getTime();
  },
  watch: {
    letter: {
      handler(newValue, oldValue) {
        // this.hanshu(newValue)
        console.log("新的", newValue);
        console.log("旧的", oldValue);
        console.log(newValue == oldValue);

        this.hanshu(newValue);
        this.pull_down = newValue;
      },
      deep: true,
    },
  },
};
</script>

<style  lang="scss">
.navigation_title {
  height: 110px;
  font-family: "微软雅黑";
  .title_bar {
    height: 50px;
    position: relative;
    color: #eef5fb;
    display: flex;
    justify-content: space-between;
    background: #01202f;
    .title_left {
      width: 33%;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #034866;
      background: #0c2d40;
      .left_svdr {
        display: flex;
        .left_svg {
          border-right: 1px solid #026f9b;
        }
        .left_dropdown {
          display: flex;
          align-items: center;
          padding: 0 10px;
          border-right: 1px solid #026f9b;
          .el-dropdown-selfdefine {
            color: rgb(20, 236, 249);
          }
        }
        .left_svg {
          width: 45px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .left_time {
        display: flex;
        align-items: center;
        .time_area {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 30px;
          .time_area_top {
            color: #fff;
            font-weight: 900;
            font-size: 13px;
          }
          .time_area_bottom {
            font-size: 10px;
            color: rgb(69, 149, 163);
          }
        }
        .time_hone {
          display: flex;
          height: 30px;
          align-items: center;
          font-size: 30px;
          margin-left: 10px;
          margin-right: 20px;
          color: rgb(29, 233, 224);
        }
      }
    }
    .title_right {
      width: 33%;
      height: 39px;
      display: flex;
      justify-content: space-between;
      background: #0c2d40;
      border-bottom: 1px solid #034866;
      .right_time {
        display: flex;
        align-items: center;
        .time_area {
          height: 30px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-left: 20px;
          .time_area_top {
            color: #fff;
            font-size: 13px;
            font-weight: 900;
          }
          .time_area_bottom {
            font-size: 10px;
            color: rgb(69, 149, 163);
          }
        }
        .time_hone {
          height: 30px;
          display: flex;
          align-items: center;
          font-size: 30px;
          margin-left: 10px;
          color: rgb(42, 229, 234);
        }
      }
      .right_kjgn {
        width: 200px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 16px;
        color: #c4d1dd;
        div {
          width: 80px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          background: #0a4a6a;
          border: 1px solid #026f9d;
        }
      }
      .right_button {
        display: flex;
        align-items: center;
        div {
          width: 20px;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 5px;
          border: 1px solid #026f9b;
        }
      }
    }
    .border-left {
      position: absolute;
      left: 50%;
      width: 22px;
      margin-left: -327px;
      height: 30px;
      top: 50px;
    }
    .border-right {
      position: absolute;
      left: 65%;
      width: 22px;
      margin-left: 17px;
      height: 30px;
      top: 50px;
    }
    .tixing {
      display: flex;
      justify-content: center;
      width: 34%;
      // position: absolute;
      // top: 0;
      // left: 50%;
      .bian {
        background-color: transparent;
        border-top: 50px solid transparent;
        border-right: 0px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 0px solid transparent;
      }
      .zuo {
        position: relative;
        border-top: 50px solid #034866;
        border-right: 50px solid #034866;
        border-bottom: 33px solid transparent;
      }
      .zuo::after {
        content: "";
        position: absolute;
        left: 0px;
        top: -50px;
        border-top: 49px solid #0c2d40;
        border-right: 50px solid #0c2d40;
        border-bottom: 33px solid transparent;
      }
      .you {
        position: relative;
        border-top: 40px solid #034866;
        border-left: 40px solid #034866;
        border-bottom: 43px solid transparent;
      }
      .you::after {
        content: "";
        position: absolute;
        right: 0;
        top: -40px;
        border-top: 39px solid #0c2d40;
        border-left: 40px solid #0c2d40;
        border-bottom: 42px solid transparent;
      }
      .title_bt {
        width: 610px;
        height: 82px;
        color: #eef5fb;
        font-size: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        background: #0c2d40;
        border-bottom: 1px solid #034866;
        .tit_img {
          width: 70px;
          height: 70px;
          margin: 0 20px 0 0;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  } // 标题栏
  .navigation_bar {
    height: 60px;
    background: #01202f;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #034866;

    .navigation_left {
      margin-left: 36px;
      display: flex;
      align-items: center;
      div {
        height: 38px;
        display: flex;
        align-items: center;
        color: #c4d1dd;
        padding: 0 15px;
        margin: 0 8px;
        border: 1px solid #026f9b;
        font-size: 18px;
      }
    }
    .navigation_right {
      width: 33%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .right_input {
        display: flex;
        height: 30px;
        margin-left: 20px;
        border: 1px solid #026f9b;
        #test {
          border: none;
          background: transparent;
          padding: 0 10px;
          color: #c4d1dd;
        }
        input::-webkit-input-placeholder {
          color: #c4d1dd;
          font-size: 12px;
        }
        #test:focus {
          outline: none;
        }
        button {
          border: none;
          padding: 0 10px;
          background: transparent;
        }
      }
      .right_button {
        display: flex;
        align-items: center;
        div {
          width: 60px;
          text-align: center;
          // font-weight: 900;
          font-size: 16px;
          height: 28px;
          display: flex;
          align-items: center;
          color: #fff;
          // padding: 0 30px;
          margin: 0 5px;
          background: #0a4a6a;
          border: 1px solid #026f9b;
          justify-content: center;
        }
      }
    }
  } // 导航栏
  .button_time:hover {
    cursor: pointer;
  }
  .navigation_check {
    background: #0077a7 !important;
    color: #fff !important;
  }
}
</style>